<template>
    <div class="box">
      <div class="water">
        <dv-border-box12>
        <h2>月度饮水量</h2>
        <Water></Water>
        </dv-border-box12>
      </div>
      <div class="electricity">
        <dv-border-box12>
        <h2>月度用电量</h2>
        <Electricity></Electricity>
        </dv-border-box12>
      </div>
      <div class="material">
        <dv-border-box12>
        <h2>月度用料量</h2>
        <Material></Material>
        </dv-border-box12>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import Water from './Left/Water.vue'
  import Electricity from './Left/Electricity.vue'
  import Material from './Left/Material.vue';
  
  </script>
  
  <style scoped>
  .box {
    width: 90%;
    height: 90%;
  }

  .water {
    width: 24vw;
    height: 27vh;
    margin-left: 1vw;
  }

  .water h2 {
    width: 100%;
    text-align: center;
    padding-top: 1vh;
    color: #2cf6f4;
  }

  .electricity {
    width: 24vw;
    height: 27vh;
    margin-left: 1vw;
    margin-top: 2vh;
  }

  .electricity h2 {
    width: 100%;
    text-align: center;
    padding-top: 1vh;
    color: #2cf6f4;
  }

  .material {
    width: 24vw;
    height: 27vh;
    margin-left: 1vw;
    margin-top: 2vh;
  }

  .material h2 {
    width: 100%;
    text-align: center;
    padding-top: 1vh;
    color: #2cf6f4;
  }
  
  </style>